<script src='http://shjs.sourceforge.net/lang/sh_javascript.js'></script>
<script src='http://shjs.sourceforge.net/sh_main.js'></script>
<link rel="stylesheet" href="../style/style.css">
<link rel='stylesheet' type='text/css' href='../style/code.css'>

<body onload="sh_highlightDocument('sh', 'javascript');">
<div id='supercontainer' ><title>
Discovery
</title>
<h1 id="exercise-3.-discovery-client">Exercise 3. Discovery Client</h1>
<h2 id="goal">Goal</h2>
<ul>
<li>Use the Discovery client to find your Google TV</li>
</ul>
<p>In this exercise, we will be implementing the discovery buttons.</p>
<center>
<img src="../images/discovery_buttons.png" width="80%" alt="Discovery buttons" title="Discovery">
</center>

<h2 id="prep">Prep</h2>
<ul>
<li>Completed Exercise 1 <a href="install_extensions.html">Installing the AnymoteLearningExercise extension</a></li>
<li>Completed Exercise 2 <a href="initialize_gtvremote.html">Initializing the GTVRemote object</a></li>
<li>Open the discovery_client_controller.js file in the text editor of your choice</li>
</ul>
<h2 id="discovery">Discovery</h2>
<p>The Discovery client has <a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/DiscoveryClient">two functions</a>, start and stop discovery.</p>
<table><tbody><tr style="background-color: #ddd"><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Returns</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Method</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Description</strong>
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> </td><td style="border: 1px solid #ccc; padding: 5px;"> 
startDiscovery(<i>adCallback</i>, <i>errorCallback</i>)
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Start searching for Google TVs on the local network. The <i>adCallback</i> function will be called when a Google TV is found.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> </td><td style="border: 1px solid #ccc; padding: 5px;"> 
stopDiscovery()
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Stops listening for Google TVs on the local network.
</td></tr> </tbody></table>

<h3 id="start-discovery">1. Start Discovery</h3>
Open the discovery_client_controller.js file and find the function
<pre class="sh_javascript"><code>var startDiscoveryClient = function() {
  displayToast('startDiscoveryClient not implemented');

  // TODO: Start the discovery client.

  // TODO: Set a timer to stop discover after a short time interval.
};
</code></pre>

Change the function to start discovery
<pre class="sh_javascript"><code>var startDiscoveryClient = function() {
  var ipAddressEl = document.getElementById('ip-address');
  discoveryClient.startDiscovery(function(advertisedDevice) {
    var deviceList = document.getElementById('discovered-devices-list');
    var deviceIpEl = document.createElement('span');
    deviceIpEl.innerHTML = advertisedDevice.address + ' ';
    deviceIpEl.addEventListener('click', function() {
      ipAddressEl.value = advertisedDevice.address;
    });
    deviceList.appendChild(deviceIpEl);
    if (ipAddressEl.value.length == 0) {
      ipAddressEl.value = advertisedDevice.address;
    }
  }, function() {
    console.log('Discovery error.');
  });

  // TODO: Set a timer to stop discover after a short time interval.
};
</code></pre>

<p>At this point you should be able to use the &quot;Start Discovery&quot; button to find your Google TV.</p>
<center>
<img src="../images/start_discovery_buttons.png" width="50%" alt="Start Discovery" title="Start Discovery"> <img src="../images/successful_discovery.png" width="52%" alt="Successful Discovery" title="Successful Discovery">
</center>


<h3 id="stop-discovery">2. Stop Discovery</h3>
<p>Whenever you start the discovery process you should be sure to always stop the discovery process as well. So let's add a timeout callback to automatically stop discovery.</p>
<pre class="sh_javascript"><code>var startDiscoveryClient = function() {
  // ... code from prior step

  stopDiscoveryClientTimerId = window.setTimeout(function() {
      stopDiscoveryClient();
  }, 5000);  // Auto stop discovery after 5-10 seconds.
};
</code></pre>

<p>Next we need to actually implement the stopDiscoveryClient method that is called from that timeout and from a button press. Find the function stopDiscoveryClient and change it to:</p>
<pre class="sh_javascript"><code>var stopDiscoveryClient = function() {
  discoveryClient.stopDiscovery();
  window.clearTimeout(stopDiscoveryClientTimerId);
};
</code></pre>

<p>This will stop the discovery process and remove the timeout (if the button was pressed before the timeout).</p>
<p>You have completed the discovery phase. Discovery, unlike Pairing and Anymote, is optional, but should make an extension much easier to use. Without discovery a user would need to manually enter their Google TV's IP address.</p>
<p>Done with Discovery. Next up pairing!</p>
<center>
<img src="../images/discovery_done.png" width="90%" alt="Discovery complete" title="Discovery complete">
</center>

<p><a href="../instructions.html">Back to main page</a> <span style="float: right;">Move on to <a href="pairing.html">Exercise 4 Pairing</a></span></p>
